<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link href="css/index.css" rel="stylesheet" type="text/css"/>
    <%--<link href="css/picture.css" rel="stylesheet" type = "text/css"/>--%>
    <style>
        #quit {
            color: blue;
        }

        #quit:hover {
            cursor: pointer;
            color: #F4A460;
        }

        #banner {
            position: relative;
            width: 1125px;
            height: 360px;
            border: 1px solid #666;
            overflow: hidden;
        }

        #banner_list img {
            border: 0px;
        }

        #banner_bg {
            position: absolute;
            bottom: 0;
            background-color: #000;
            height: 30px;
            filter: Alpha(Opacity=30);
            opacity: 0.3;
            z-index: 1000;
            cursor: pointer;
            width: 478px;
        }

        #banner_info {
            position: absolute;
            bottom: 0;
            left: 5px;
            height: 22px;
            color: #fff;
            z-index: 1001;
            cursor: pointer
        }

        #banner_text {
            position: absolute;
            width: 120px;
            z-index: 1002;
            right: 3px;
            bottom: 3px;
        }

        #banner ul {
            position: absolute;
            list-style-type: none;
            filter: Alpha(Opacity=80);
            opacity: 0.8;
            z-index: 1002;
            margin: 0;
            padding: 0;
            bottom: 3px;
            right: 5px;
        }

        #banner ul li {
            padding: 0px 8px;
            float: left;
            display: block;
            color: #FFF;
            background: #6f4f67;
            cursor: pointer;
            border: 1px solid #333;
        }

        #banner ul li.on {
            background-color: #000;
        }

        #banner_list a {
            position: absolute;
        }
    </style>
</head>
<body>

<div>
    <div id="top">
        <p class="title">&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="index.jsp" style="cursor:pointer;">HappyMusic后台系统</a>
        </p>
        <p class="quit">&nbsp;<a href="login.html" onclick="return confirm('确认退出吗? ');quit()" id="quit">退出</a>&nbsp;&nbsp;&nbsp;
        </p>
        <p class="welcome">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欢迎你&nbsp;<%=session.getAttribute("username")%>&nbsp;&nbsp;&nbsp;</p>
        <p id="showTime" class="showTime">&nbsp;&nbsp;</p>
    </div>
    <div id="left">
        <div class="rad"><a href="admin">系统设置</a></div>
        <div class="rad"><a href="myUser">用户管理</a></div>
        <div class="rad"><a href="mySong">歌曲管理</a></div>
        <div class="rad"><a href="myList">歌单管理</a></div>
    </div
    <div class="right">
        <br>
        <p>&nbsp;&nbsp;HappyMusic是Java+Mysql开发的一款开源的跨平台音乐管理系统，程序完全免费，稳定，易于扩展且具有超强负载能力，
            完全可以满足音乐、DJ、音乐分享、音乐资讯等使用。</p>

        <div id="banner" style="left: 76px;top:80px;">
            <div id="banner_bg"></div>
            <div id="banner_info"></div>
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            <div id="banner_list">
                <a href="#" target="_blank"><img
                        src="https://pic.xiami.net/images/common/uploadpic/83/1606919947983.jpg?x-oss-process=image/crop,y_30,h_360/quality,q_80/format,jpg"
                        title="HappyMusic1" alt="HappyMusic1"/></a>
                <a href="#" target="_blank"><img
                        src="https://pic.xiami.net/images/common/uploadpic/97/1606842895597.jpg?x-oss-process=image/crop,y_30,h_360/quality,q_80/format,jpg"
                        title="HappyMusic2" alt="HappyMusic2"/></a>
                <a href="#" target="_blank"><img
                        src="https://pic.xiami.net/images/common/uploadpic/65/1606821919965.jpg?x-oss-process=image/crop,y_30,h_360/quality,q_80/format,jpg"
                        title="HappyMusic3" alt="HappyMusic3"/></a>
                <a href="#" target="_blank"><img
                        src="https://pic.xiami.net/images/common/uploadpic/43/1606788654343.jpg?x-oss-process=image/crop,y_30,h_360/quality,q_80/format,jpg"
                        title="HappyMusic4" alt="HappyMusic4"/></a>
            </div>
        </div>
    </div>
    <div id="bottom">版权所有</div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script src="http://www.jq22.com/js/jq.js"></script>
<%--<script src="js/picture.js"></script>--%>
<script>
    function showTime() {
        var a = new Date();
        var b = a.toLocaleTimeString();
        var c = a.toLocaleDateString();
        document.getElementById("showTime").innerHTML = c + "&nbsp" + b;
    }

    setInterval(function () {
        showTime()
    }, 1000);

    function quit() {
        //防止页面后退
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });
    }
</script>
<script type="text/javascript">
    var t = n = 0, count;
    $(document).ready(function () {
        count = $("#banner_list a").length;
        $("#banner_list a:not(:first-child)").hide();
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
        $("#banner_info").click(function () {
            window.open($("#banner_list a:first-child").attr('href'), "_blank")
        });
        $("#banner li").click(function () {
            var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
            n = i;
            if (i >= count) return;
            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
            $("#banner_info").unbind().click(function () {
                window.open($("#banner_list a").eq(i).attr('href'), "_blank")
            })
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
            document.getElementById("banner").style.background = "";
            $(this).toggleClass("on");
            $(this).siblings().removeAttr("class");
        });
        t = setInterval("showAuto()", 4000);
        $("#banner").hover(function () {
            clearInterval(t)
        }, function () {
            t = setInterval("showAuto()", 4000);
        });
    })

    function showAuto() {
        n = n >= (count - 1) ? 0 : ++n;
        $("#banner li").eq(n).trigger('click');
    }
</script>
</body>
</html>